CSS Light-Dark-funksjon: Automatisk tematilpasning for et globalt nett

I dagens globalt tilkoblede verden må nettsteder være tilgjengelige og visuelt tiltalende for brukere fra ulike bakgrunner og med ulike preferanser. En av de mest effektive måtene å oppnå dette på er gjennom automatisk tematilpasning, spesielt ved å tilby både lyse og mørke temaer som justeres basert på brukerens systeminnstillinger. Dette blogginnlegget vil veilede deg gjennom implementeringen av denne funksjonaliteten ved hjelp av CSS media queries og egendefinerte egenskaper, og sikre en sømløs og komfortabel nettleseropplevelse for ditt internasjonale publikum.

Hvorfor implementere automatiske lyse og mørke temaer?

Det er flere overbevisende grunner til å innlemme automatisk tematilpasning i webprosjektene dine:

• Forbedret brukeropplevelse: Brukere har ofte en sterk preferanse for enten lyse eller mørke temaer. Ved å respektere systeminnstillingene deres kan de surfe på nettstedet ditt på en måte som føles naturlig og komfortabel. Dette er spesielt viktig for brukere som tilbringer mange timer foran skjermen, da mørke temaer kan redusere øyebelastningen i omgivelser med lite lys.
• Forbedret tilgjengelighet: Lyse og mørke temaer kan forbedre tilgjengeligheten betydelig for brukere med nedsatt syn. Høykontrastmoduser kan gjøre tekst lettere å lese, mens mørke temaer kan redusere gjenskinn og forbedre lesbarheten for brukere med lysfølsomhet.
• Moderne webdesign: Implementering av lyse og mørke temaer viser en forpliktelse til moderne prinsipper for webdesign og brukersentrering. Det viser at du bryr deg om å tilby en polert og tilpasningsdyktig opplevelse.
• Redusert øyebelastning: Spesielt viktig for brukere i regioner med lange arbeidsdager foran datamaskiner (f.eks. mange asiatiske land). Det mørke temaet vil lette belastningen på øynene deres.
• Batterisparing: På enheter med OLED-skjermer kan mørke temaer spare batteristrøm ved å redusere mengden lys som sendes ut. Dette er relevant for brukere over hele verden, spesielt de på mobile enheter med begrenset batterikapasitet.

Slik implementerer du automatisk tematilpasning med CSS

Kjernen i automatisk tematilpasning ligger i prefers-color-scheme media query. Denne CSS media queryen lar deg oppdage brukerens foretrukne fargevalg (lyst eller mørkt) og anvende tilsvarende stiler.

Trinn 1: Definer egendefinerte egenskaper (CSS-variabler)

Start med å definere egendefinerte egenskaper (CSS-variabler) for å lagre fargeverdiene for dine lyse og mørke temaer. Dette gjør det enkelt å bytte mellom temaer ved ganske enkelt å oppdatere variabelverdiene.

            
:root {
  --background-color: #ffffff; /* Bakgrunn for lyst tema */
  --text-color: #000000; /* Tekst for lyst tema */
  --link-color: #007bff; /* Lenke for lyst tema */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Bakgrunn for mørkt tema */
    --text-color: #ffffff; /* Tekst for mørkt tema */
    --link-color: #66b3ff; /* Lenke for mørkt tema */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

            

              
                Copy
              
            
          

I dette eksemplet definerer vi variabler for bakgrunnsfarge, tekstfarge, lenkefarge og knappefarger. :root-selektoren anvender disse variablene på hele dokumentet. Media queryen @media (prefers-color-scheme: dark) overstyrer deretter disse variablene med verdier for mørkt tema når brukeren har satt systemet sitt til mørk modus.

Trinn 2: Bruk egendefinerte egenskaper i stilene dine

Deretter bruker du disse egendefinerte egenskapene i CSS-stilene dine for å kontrollere utseendet på elementene på nettstedet ditt.

            
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Jevn overgang */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Her bruker vi var()-funksjonen for å få tilgang til verdiene til våre egendefinerte egenskaper. Vi har også lagt til en transition-egenskap til body-elementet for å skape en jevn overgang mellom temaene.

Trinn 3: Testing og finjustering

Test implementeringen din grundig på tvers av forskjellige nettlesere og operativsystemer. Moderne nettlesere som Chrome, Firefox, Safari og Edge støtter prefers-color-scheme media queryen fullt ut. Du kan bytte mellom lys og mørk modus i operativsysteminnstillingene for å se endringene reflektert på nettstedet ditt.

Avanserte teknikker og hensyn

Tilby en manuell temabryter

Selv om automatisk tematilpasning er et godt utgangspunkt, kan noen brukere foretrekke å manuelt overstyre systeminnstillingene sine. Du kan tilby en manuell temabryter ved hjelp av JavaScript og local storage.

HTML:

            
<button id="theme-toggle">Bytt tema</button>

            

              
                Copy
              
            
          

JavaScript:

            
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Standard til auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Bruk starttema ved sidelasting
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Hvis satt til auto, la prefers-color-scheme bestemme
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});


            

              
                Copy
              
            
          

CSS: Legg til følgende CSS sammen med den forrige CSS-en. Legg merke til den manuelle overstyringen:

            
body.light-theme {
  --background-color: #ffffff; /* Bakgrunn for lyst tema */
  --text-color: #000000; /* Tekst for lyst tema */
  --link-color: #007bff; /* Lenke for lyst tema */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Bakgrunn for mørkt tema */
  --text-color: #ffffff; /* Tekst for mørkt tema */
  --link-color: #66b3ff; /* Lenke for mørkt tema */
  --button-background-color: #333;
  --button-text-color: #fff;
}

            

              
                Copy
              
            
          

Dette kodeutdraget legger til en knapp som lar brukere veksle mellom lyse, mørke og automatiske temaer. Det valgte temaet lagres i local storage slik at det vedvarer på tvers av sidelastinger.

Håndtering av bilder og SVG-er

Noen bilder og SVG-er ser kanskje ikke bra ut i både lyse og mørke temaer. Du kan bruke CSS media queries for å betinget vise forskjellige versjoner av disse ressursene.

            
img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

            

              
                Copy
              
            
          

Dette kodeutdraget viser ett bilde (med klassen light-mode) i lys modus og et annet bilde (med klassen dark-mode) i mørk modus.

Hensyn til fargepalett for et internasjonalt publikum

Når du velger fargepaletter for dine lyse og mørke temaer, vær oppmerksom på kulturelle assosiasjoner og tilgjengelighetshensyn. Her er noen generelle retningslinjer:

• Kontrast: Sørg for tilstrekkelig kontrast mellom tekst- og bakgrunnsfarger for å oppfylle tilgjengelighetsstandarder (WCAG). Bruk verktøy som WebAIMs Contrast Checker for å verifisere kontrastforhold.
• Fargeblindhet: Vurder virkningen av fargevalgene dine på brukere med fargeblindhet. Bruk verktøy som Color Blindness Simulator for å forhåndsvise nettstedet ditt slik det sees av personer med forskjellige typer fargeblindhet.
• Kulturelle assosiasjoner: Vær oppmerksom på at farger kan ha forskjellige kulturelle assosiasjoner i forskjellige deler av verden. For eksempel er hvitt ofte assosiert med renhet og sorg i noen kulturer, mens rødt er assosiert med hell og velstand i andre. Undersøk kulturelle assosiasjoner for å unngå å utilsiktet forårsake fornærmelse eller forvirring.
• Nøytrale paletter: Når du er i tvil, velg nøytrale fargepaletter som er mindre sannsynlig å bli feiltolket eller støtende. Gråtoner, beige og dempede toner kan være et trygt og allsidig valg.
• Brukertesting: Gjennomfør brukertesting med en mangfoldig gruppe deltakere for å samle tilbakemeldinger på fargevalgene dine og sikre at de blir oppfattet positivt av målgruppen din.
• Lokalisering: Der det er mulig, vurder å bruke lokaliserte fargepaletter som er skreddersydd for de kulturelle preferansene i spesifikke regioner eller land. Dette kan innebære å justere fargetoner, metning og lysstyrke for å passe til lokal smak.

Ytelseshensyn

Selv om implementering av automatisk tematilpasning er relativt enkelt, er det viktig å vurdere den potensielle innvirkningen på ytelsen. Unngå å bruke altfor komplekse CSS-selektorer eller animasjoner som kan bremse ned gjengivelsen. Sørg også for at dine egendefinerte egenskaper er definert effektivt for å minimere overheaden av variabeloppslag.

Her er noen beste praksiser for å optimalisere ytelsen:

• Hold CSS-selektorer enkle: Unngå å bruke altfor spesifikke eller nestede CSS-selektorer, da de kan øke tiden det tar for nettleseren å matche stiler til elementer.
• Bruk CSS-egendefinerte egenskaper med omhu: Selv om egendefinerte egenskaper er kraftige, kan overdreven bruk påvirke ytelsen. Bruk dem strategisk for verdier som endres ofte eller verdier som deles på tvers av flere elementer.
• Minimer unødvendige animasjoner: Animasjoner kan gi nettstedet ditt visuell appell, men de kan også påvirke ytelsen hvis de ikke implementeres nøye. Bruk CSS-overganger og -animasjoner sparsomt og optimaliser dem for jevn gjengivelse.
• Test på ekte enheter: Test alltid nettstedet ditt på ekte enheter med varierende nettverksforhold og maskinvarekapasitet for å identifisere potensielle ytelsesflaskehalser. Bruk nettleserutviklerverktøy for å profilere nettstedets ytelse og identifisere forbedringsområder.

Beste praksis for tilgjengelighet

Sørg for at dine lyse og mørke temaer oppfyller retningslinjer for tilgjengelighet, som WCAG (Web Content Accessibility Guidelines). Dette inkluderer å gi tilstrekkelig fargekontrast, bruke semantisk HTML, og sørge for at alle interaktive elementer er tilgjengelige via tastatur.

Her er noen spesifikke beste praksiser for tilgjengelighet å følge:

• Tilstrekkelig fargekontrast: Sørg for at kontrastforholdet mellom tekst og bakgrunnsfarger oppfyller WCAG 2.1 AA-standarder (4.5:1 for normal tekst, 3:1 for stor tekst). Bruk verktøy som WebAIMs Contrast Checker for å verifisere kontrastforhold.
• Semantisk HTML: Bruk semantiske HTML-elementer (f.eks. <header>, <nav>, <article>, <aside>, <footer>) for å strukturere innholdet ditt logisk. Dette hjelper skjermlesere og andre hjelpemiddelteknologier å forstå innholdet og navigere effektivt på siden.
• Tastaturtilgjengelighet: Sørg for at alle interaktive elementer (f.eks. lenker, knapper, skjemafelt) er tilgjengelige via tastatur. Bruk tabindex-attributtet for å kontrollere fokusrekkefølgen og gi visuelle signaler for å indikere hvilket element som har fokus.
• ARIA-attributter: Bruk ARIA (Accessible Rich Internet Applications)-attributter for å gi tilleggsinformasjon om strukturen og funksjonaliteten til webapplikasjonen din til hjelpemiddelteknologier. For eksempel, bruk aria-label for å gi en beskrivende etikett for et element, eller aria-hidden for å skjule et element fra skjermlesere.
• Testing med hjelpemiddelteknologi: Test nettstedet ditt med skjermlesere og andre hjelpemiddelteknologier for å identifisere potensielle tilgjengelighetsproblemer. Bruk verktøy som NVDA (NonVisual Desktop Access) eller VoiceOver for å oppleve nettstedet ditt som en bruker med nedsatt syn.
• Gi alternativ tekst til bilder: Bruk alt-attributtet for å gi beskrivende alternativ tekst for alle bilder. Denne teksten vil vises hvis bildet ikke kan lastes, og den vil også bli lest av skjermlesere.

Eksempler fra forskjellige regioner

Vurder disse eksemplene på hvordan lyse og mørke temaer kan skreddersys for ulike globale målgrupper:

• Øst-Asia: I mange østasiatiske kulturer er hvitt assosiert med sorg. Når du designer et mørkt tema for disse regionene, unngå å bruke overdreven hvit tekst på en svart bakgrunn. Velg heller off-white eller lys grå tekst.
• Midtøsten: I noen kulturer i Midtøsten foretrekkes ofte sterke farger. Når du designer et lyst tema, kan du vurdere å bruke levende aksentfarger for å legge til visuell interesse. Sørg imidlertid for at fargevalgene ikke kolliderer med kulturelle følsomheter.
• Europa: I Europa foretrekkes ofte minimalistiske design. Når du designer både lyse og mørke temaer, velg rene layouter, enkel typografi og subtile fargepaletter.
• Latin-Amerika: I Latin-Amerika blir dristige og uttrykksfulle design ofte verdsatt. Når du designer både lyse og mørke temaer, kan du vurdere å bruke leken typografi, levende farger og dynamiske animasjoner.
• Afrika: På grunn av varierende internetthastigheter og enhetskapasiteter, prioriter ytelse og tilgjengelighet. Bruk enklere designelementer og test på tregere tilkoblinger.

Konklusjon

Implementering av automatiske lyse og mørke temaer er et avgjørende skritt mot å skape en mer tilgjengelig og brukervennlig nettopplevelse for et globalt publikum. Ved å utnytte CSS media queries og egendefinerte egenskaper, kan du enkelt tilpasse nettstedets utseende for å matche brukerpreferanser, redusere øyebelastning og forbedre tilgjengeligheten for brukere med nedsatt syn. Husk å vurdere kulturelle assosiasjoner, retningslinjer for tilgjengelighet og ytelseshensyn for å sikre en sømløs og inkluderende nettleseropplevelse for alle.

Ved å ta i bruk disse teknikkene, viser du en forpliktelse til moderne prinsipper for webdesign og imøtekommer de mangfoldige behovene til ditt internasjonale publikum, noe som gjør nettstedet ditt til et innbydende og komfortabelt sted for alle.